<template>
	<view class="out-box">
		<view class="hader" v-if="user.shop_type == 1" @tap="preview()">
			<view class="hader_title">
				<view class="hader_title_right_one">发布预览</view>
				<view class="hader_title_right_two">预览发布详情<image class="icon" src="../../static/images/向右.png"></image></view>
			</view>
			<image class="progress" src="../../static/images/jindu.png"></image>

			<view class="hader_main">
				<view class="item_left">
					<view class="menban">尚未发布</view>
					<image class="item_left_img" :src=trabsfer.result.cover_img />
				</view>
				<view class="item_right">
					<view class="item_right_one"><span v-if="trabsfer.result.is_swerve == 1" class="isspan">急转 | </span>{{trabsfer.result.title}}</view>
					<view class="item_right_two_big">
						<view class="item_right_two">{{trabsfer.result.city + '-'+ trabsfer.result.county + ' | ' + trabsfer.result.shop_area+'㎡'}}</view>
						<!-- <view class="three_are">{{  trabsfer.result.shop_area+'㎡'}}</view> -->
					</view>
					<view v-if="trabsfer.result.feature_label" class="item_right_identifying">
						<view class="item_right_identifying_item" v-for="item1,index1 in trabsfer.result.feature_label.split(',')" :key="index1">
							<view >{{ item1}}</view>   
						</view>
					</view>
					<view class="item_right_three">
						<view class="three_icon">
							<image class="icon" src="../../static/images/room.png"></image>
							<view class="name">租金</view>
						</view>
						<view class="three_time" v-if="trabsfer.result.update_time">
							{{ ( trabsfer.result.rent == '' || trabsfer.result.rent == null ||trabsfer.result.rent == '面议' || trabsfer.result.rent =='null') ? '面议': trabsfer.result.rent + '元/月' }}
						</view>
					</view>
					<!-- <view class="purpose">原用途：酒店住宿/客栈</view> -->

				</view>
			</view>
		</view>
		<view class="hader" v-if="user.shop_type == 2" @tap="previewtwo()">
			<view class="hader_title">
				<view class="hader_title_right_one">发布预览</view>
				<view class="hader_title_right_two">预览发布详情<image class="icon" src="../../static/images/向右.png"></image></view>
			</view>
			<image class="progress" src="../../static/images/jindu.png"></image>
			<view class="hader_maintwo">
				<view class="item_left">
					<view class="item_left_one"><span v-if="trabsfer.result.is_swerve == 1" class="isspan">(急租)</span>{{ trabsfer.result.title }}</view>
					<view class="item_right_two_big">
						<view class="item_right_two">{{trabsfer.result.city + '-'+trabsfer.result.county +' | ' + trabsfer.result.shop_area+"m²"}}</view>
						<view class="three_are"></view>
					</view>
					
					<view v-if="trabsfer.result.feature_label" class="item_right_identifying">
						<view class="item_right_identifying_item" v-for="item1,index1 in trabsfer.result.feature_label.split(',')" :key="index1">
							<view >{{ item1}}</view>
						</view>
					</view>
					<view class="item_left_two">联系人：{{ trabsfer.result.name }}</view>
					<view class="item_left_two">联系电话：{{trabsfer.result.phone}}</view>
				</view>
			</view>
		</view>
		<!-- 下方的主要内容 -->
		<view class="main" v-if="product_lists">
			<view class="title">{{user.shop_type == 1?'店铺转让套餐':'找店房源套餐'}}</view>
			<view class="main_top">
				<image class="main_top_image" src="../../static/images/viptopone.png"></image>
				<view class="main_top_left">
					<view class="main_top_left_one">{{ product_value.required.product_name}}</view>
					<view class="main_top_left_two">{{user.shop_type == 1?'店铺信息收录服务到成功转出为止':'房源寻找信息收录服务到成功为止'}}</view>
				</view>
				<view class="main_top_right"><span class="spanone">￥</span>{{product_value.required.now_money/100}}</view>
			</view>

			<view class="main_top" style="border: none;">
				<image class="main_top_image" src="../../static/images/viptoptwo.png"></image>
				<view class="main_top_left">
					<view class="main_top_left_one">{{user.shop_type == 1?'选择是否置顶店铺':'选择是否置顶房源信息'}}</view>
					<view class="main_top_left_two">{{user.shop_type == 1?'转店信息平台首页头部置顶展示':'找店信息平台首页头部置顶展示'}}</view>
				</view>
			</view>
			<view class="two_tw">
				<scroll-view class="scroll-view_H" scroll-x="true" show-scrollbar="false">
					<view v-for="item,index in product_value.requiredtwo" :key="index">
						<view :class="item.id ==product_value.default.id ? 'scroll_item active11' : 'scroll_item'" @tap="childList(item)" >
							<view class="item_top">{{ item.product_name }}</view>
							<view class="item_center"><span class="span2">￥</span>{{ item.now_money/100}}</view>
							<view class="item_bottom" v-if="item.id ==product_value.default.id"></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="pay_radio">
			<view class="pay_top">支付方式</view>
			<view class="radio_main" v-if="payuses.users">
				<view :class="item.value==payuses.default?'pay_item defaul':'pay_item'" v-for="(item,index) in payuses.users" @tap="changepay(item)">
					<img class="img" :src="item.icon"/>
					<view class="text">{{ item.name }}</view>
					<image class="img2" v-show="item.value==payuses.default" src="../../static/images/langou.png"></image>
			
				</view>
			</view>
		</view>
		<!-- 最下方悬浮支付 -->
		<view class="buttom">
			<view class="buttom_Package">
				<view class="buttom_name">{{'收录￥'+ product_value.required.now_money/100 + (product_value.default.now_money?' + 置顶￥'+product_value.default.now_money/100:'') }}</view>
				<view class="buttom_money"><span class="span1">合计：</span><span class="span2">￥</span>{{ product_value.allmoney/100 }}</view>
			</view>
			<view class="buttom_buttom" @tap="pay_throttle()">立即发布推广</view>
		</view>
	</view>
</template>

<script setup>
import {ref,reactive, onMounted, onBeforeMount,onUnmounted } from 'vue'
import {onGotApiData,addClick,ongetphone} from '../../util/api.js'
import { onLoad, onHide,onUnload  } from '@dcloudio/uni-app'
	// 从上个页面获取到参数
	const props = defineProps({
				shop_id: String,
				shop_type:String,
				money:Number,
			});
	const propshop_id = props.shop_id
	const propshop_type = props.shop_type
	const propmoney = props.money
	// 用户的信息
	let user = reactive({
		openid:'',
		shop_type:0,
		link:'',
		channel_no:'',
		phone:'',
		shop_id:'',
		product_id:'',
		money:0,
		son_channel_no:''
	})
	
	// 在组件渲染之前执行
	onBeforeMount(() => {

		if(propshop_id != null && propshop_id != '' && propshop_type != null && propshop_type != ''){
			user.shop_type = propshop_type
			user.shop_id = propshop_id
			user.money = propmoney
			console.log("上个页面传过来的",user.shop_type,user.shop_id)
		}
		console.log('组件准备渲染');
		user.channel_no = uni.getStorageSync('channel_no') || '';
		user.son_channel_no = uni.getStorageSync('son_channel_no') || '';
		user.link = uni.getStorageSync('link');
		user.phone = uni.getStorageSync('phone');
		// 调用请求产品信息的接口
		product();
		// 获取支付方式
		getpayuse()
		// user.openid = uni.getStorageSync('open_id') || null;
		// 从首页跳转到这个页面之后，没有登录，跳转到登录页面
		// if(!user.openid){
		// 	uni.navigateTo({
		// 		url: '/pages/login/login'
		// 	});
		// }
		// 判断调用哪个接口
		if(user.shop_type == 1){
			lists_post()
		}else{
			lists_post_two()
		}
		// 步骤2：在回调页面中获取openid
		// 微信授权页面回调到你指定的回调页面，URL中会附带一个code参数，你可以通过以下方式获取它
		// let urlParams = new URLSearchParams(window.location.search);
		// let code = urlParams.get('code');
		// console.log('code',code)
		// // 	console.log("我没有点击同意")
		// 	uni.showToast({
		// 		title: code,
		// 		icon: 'none',
		// 		duration: 2000
		// 	});
		// 设置一个定时器
		jsqtimer.fun = setInterval(()=>{
			jsqtimer.value ++
			console.log('jsqtimer.value',jsqtimer.value)
		},1000)

	})
	let jsqtimer = reactive({
		value:0,
		fun:null,
	})
	onHide(() => {
		  console.log('页面被隐藏，可能是跳转了');
		if(jsqtimer.value){
			addClick('停留时间：会员页',jsqtimer.value + 's')
			jsqtimer.value = 0
			clearInterval(jsqtimer.fun)
		}
	
	})
	// 页面卸载（跳转、返回时触发）
	onUnload(() => {
	  console.log('✅ 页面卸载：onUnload 被触发')
	  if(jsqtimer.value){
	  	addClick('停留时间：会员页',jsqtimer.value + 's')
	  	jsqtimer.value = 0
	  	clearInterval(jsqtimer.fun)
	  }
	})
	
	// 在组件渲染完成后执行
	onMounted(() => {
		console.log('组件已经渲染完毕');
	});

	  // 店铺详细信息
	  let trabsfer = reactive({
			result: {}
		});
		// 请求店铺详细信息接口
	const lists_post = () =>{
		let params = reactive({
			id : user.shop_id
		})
		console.log("params",params)
		onGotApiData('/h5/api/app/shop_transfer/info','GET',params,lists_value)
	}
	// 店铺详细信息请求的结果
	const lists_value = (result) => {
		trabsfer.result = result
		console.log('lists_value请求成功',trabsfer.result)
	}
	
		// 请求求租店铺详细信息接口
	const lists_post_two = () =>{
		let params = reactive({
			id : user.shop_id
		})
		console.log("params",params)
		onGotApiData('/h5/api/app/shop_rent/info','GET',params,lists_valuetwo)
	}
	// 店铺详细信息请求的结果
	const lists_valuetwo = (result) => {
		trabsfer.result = result
		console.log('lists_valuetwo请求成功',trabsfer.result)
	}
	// 支付宝上方的人员列表
	let porpor = ref([
		{
			name:'程先生',
			num:'185****2311',
		},
		{
			name:'谢女士',
			num:'134****9761',
		},
		{
			name:'蒋先生',
			num:'177****9260',
		},
		{
			name:'秦女士',
			num:'151****3384',
		},
		{
			name:'冉先生',
			num:'189****4682',
		},
		{
			name:'魏先生',
			num:'138****9349',
		},
	])
	// 获取支付方式的接口
		const payuses = reactive({
			default:'',
			users:[],
		})

	const getpayuse = () =>{
		let params = reactive({	 
			channel_no: user.channel_no,
			projectName:'shop-subletting',
		})
		console.log("params",params)
		ongetphone('/h5/api/app/query_pay_type','POST',params,payuse_value)
	} 
	const payuse_value = (result) =>{
		console.log('获取支付方式的结果',result)
		if(result.code == 200){
			payuses.default = result.data[0]
			result.data.forEach((item,index)=>{
				if(item == 'ZFB_H5'){
					const obj = {
						name:'支付宝支付',
						value:'ZFB_H5',
						icon: '/static/images/zfb.png',
					}
					payuses.users.push(obj)
				}else if(item == 'WX_H5'){
					const obj = {
						name:'微信支付',
						value:'WX_H5',
						icon: '/static/images/wx.png',
					}
					payuses.users.push(obj)
				}else if(item == 'WX_XCX'){
					const obj = {
						name:'微信支付',
						value:'WX_XCX',
						icon: '/static/images/wx.png',
					}
					payuses.users.push(obj)
				}
			})
			
			if(payuses.users.length >= 3){
				payuses.users = payuses.users.filter(item => item.value !== 'WX_XCX')
			}
			console.log('支付方式',payuses.users)
		}else{
			uni.showToast({
				title: result.message,
				icon: 'none',
				//显示持续时间为 2秒
				duration: 2000
			})
		}
	}
	// 切换支付方式
	const changepay = (item) =>{
		payuses.default = item.value
	}

	// 产品的列表
	let product_lists = ref([])
	// 产品分支
	let product_value  = reactive({
		// 下标是0
		required:{},
		// 下标是1
		requiredtwo:{},
		// 选中的产品
		default:{},
		// 计算总价格
		allmoney:''
	})
	// 请求产品会员的接口
	const product = () =>{
		let params = reactive({})
		// console.log('cp',user.son_channel_no == ''? user.channel_no : user.son_channel_no)
		params.channelNo = user.son_channel_no == ''? user.channel_no : user.son_channel_no,
		params.shop_type = user.shop_type,
		params.money = user.money
		// params.shop_type = 2
		console.log("params",params)
		onGotApiData('/api/app/product/transfer/v1/list','GET',params,product_result)
	}
	// 会员页面产品请求的结果
	const product_result = (result) => {
		// 遍历一下，会有json字符串
		console.log('产品列表',result)
		product_lists.value = result
		product_value.required = result.show_list[0]
		// 赋值最初是的总金额
		user.pay_money = result.show_list[0].now_money
		product_value.requiredtwo = result.top_list
		// product_value.default = product_lists.value[0]
		console.log('我是产品结果1',result)
		product_value.allmoney = Number(product_value.required.now_money)
		console.log('我是产品结果2',product_value.required)
		// console.log('我选中的产品是', product_value.default)
	}
	// 点击产品选择框事件(可以取消)
	const childList = (item) =>{
		addClick("H5会员页",item.product_name)
		console.log('e:',item);
		if(item.id == product_value.default.id){
			product_value.default = {}
			product_value.allmoney = Number(product_value.required.now_money)
		}else{
			product_value.default = item
			product_value.allmoney = Number(product_value.required.now_money) +Number(item.now_money)
		}
		console.log("我选中的是",product_value.default)
	}

		// 支付加一个节流
	let lastClickTime =ref(0)
	const pay_throttle = (str) => {

		// const fullUrl = 'https://shop-h5.ywmanlv.cn/shop_v2/index.html#/?channelNo=ML_PPZ_V4_1002'
		// console.log('url',fullUrl)
		// // 步骤1：构造授权链接
		// let appId = 'wxfa898d11601e19ee';
		// let redirectUri = encodeURIComponent('https://shop-h5.ywmanlv.cn/shop_test/index.html#/pages/payvip_three/payvip_three?shop_id=b60944a3722448b8bc2aeb7d2d7b4230&shop_type=1&money=3213'); // 回调页面URL需要在公众号后台设置
		// let scope = 'snsapi_base'; // 授权方式，snsapi_base表示静默授权，只获取用户的openid
		// let authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`;

		// // 跳转到微信授权页面
		// window.location.href = authUrl;


		// 使用code获取用户的openid
		// fetch(`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appId}&secret=${appSecret}&code=${code}&grant_type=authorization_code`)
		// .then(response => response.json())
		// .then(data => {
		// 	let openid = data.openid; // 获取到用户的openid
		// 	// 在这里可以将openid传递给后端服务器进行处理
		// 	console.log('openid',openid)
		// })
		// .catch(error => {
		// 	console.error('获取openid失败', error);
		// });
		
		
		const currentTime = Date.now();
		console.log("当前时间",currentTime)
		if (currentTime - lastClickTime.value > 1200) {
		// 执行支付
			pay()
			lastClickTime.value = currentTime
		} else {
			lastClickTime.value = currentTime
		}
	}
	// 点击下方支付
	const pay = () =>{
		addClick("H5会员页","立即开通会员按钮")
		// if(!range_value.value[0]){
		// 	console.log("我没有点击同意")
		// 	uni.showToast({
		// 		title: '请勾选服务协议',
		// 		icon: 'none',
		// 		duration: 2000
		// 	});
		// 	return
		// }
			
		uni.showLoading({
			title: '支付中',
			duration: 2000
		});
		if(product_value.default.id){
			user.product_id = product_value.required.id + ',' + product_value.default.id
		}else{
			user.product_id =  product_value.required.id
		}
		let params = reactive({})
		params.channel_no = user.channel_no,
		params.sub_channel_no = user.son_channel_no,
		params.rent = user.money,
		params.product_id = user.product_id,
		params.pay_type = payuses.default,
		params.link = user.link,
		params.phone = user.phone,
		// params.phone = '13562354412',
		params.shop_type = user.shop_type,
		params.shop_id = user.shop_id
		console.log("params",params)
		
		if(payuses.default == 'WX_XCX'){
			console.log('xxxx')
			// 清除弹框
			setTimeout(function(){
				uni.hideLoading();
			})
				uni.showToast({
					title: '即将跳转至微信小程序，完善转店资料，查询转店进度',
					icon: 'none',
					duration: 1000
				});
			
			toweixin()
			return
		}
		
		onGotApiData('/api/app/order/create_v1','POST',params,pay_result)
	}
	
	// 支付请求的结果
	const pay_result = (result) => {
		console.log('支付请求结果',result)
		// 唤起微信支付
		requestPayment(result)
	}
	// 唤起支付
	const requestPayment = (result) => {	
		// 清除弹框	
		setTimeout(function(){	
			uni.hideLoading();
		})	
		console.log("请球支付结果",result)	
		const urll = result.payUrl
		uni.setStorageSync('urll',urll);
			
		window.location.href = result.payUrl
	}
	// 跳转到微信
	const toweixin = () => {
		const params = {
			env_version:'trial',
			shop_type: user.shop_type,
			product_id:user.product_id,
			shop_id:user.shop_id,
			link: uni.getStorageSync('link')||'',
			path1:'/pageson/h5pay/h5pay'
		}
		onGotApiData('/h5/api/app/other/jump_xcx_pay','GET',params,toweixin_result)
	}
	const toweixin_result = (result) => {
		console.log(result)
		window.location.href = result.openlink
	}
	// 跳转到阅览详情页面
	const preview = () =>{
		
		if(product_value.default.id){
			user.product_id = product_value.required.id + ',' + product_value.default.id
		}else{
			user.product_id =  product_value.required.id
		}
		let params = reactive({})
		params.channel_no = user.channel_no,
		params.sub_channel_no = user.son_channel_no,
		params.rent = user.money,
		params.product_id = user.product_id,
		params.pay_type = payuses.default,
		params.link = '',
		params.phone = user.phone,
		// params.phone = '13562354412',
		params.shop_type = user.shop_type,
		params.shop_id = user.shop_id
		console.log("params",params)
			
		const obj = JSON.stringify(params);

		uni.navigateTo({
			url: `/pages/paylook/paylook?obj=${obj}&id=${user.shop_id}&shop_type=${user.shop_type}`
		});
	} 
		// 跳转到阅览详情页面
	const previewtwo = () =>{
		if(product_value.default.id){
			user.product_id = product_value.required.id + ',' + product_value.default.id
		}else{
			user.product_id =  product_value.required.id
		}
		let params = reactive({})
		params.channel_no = user.channel_no,
		params.sub_channel_no = user.son_channel_no,
		params.rent = user.money,
		params.product_id = user.product_id,
		params.pay_type = payuses.default,
		params.link = '',
		params.phone = user.phone,
		// params.phone = '13562354412',
		params.shop_type = user.shop_type,
		params.shop_id = user.shop_id
		console.log("params",params)
		const obj = JSON.stringify(params);

		uni.navigateTo({
			url: `/pages/paylooktwo/paylooktwo?obj=${obj}&id=${user.shop_id}&shop_type=${user.shop_type}`
		})
	}
</script> 

<style lang="scss" scoped>
		@font-face {
		font-family: 'MyFont';
		src: url('../../static/font/Alimama_ShuHeiTi_Bold.ttf') format('ttf'),
			// url('path/to/font.woff') format('woff');
		/* 可以根据字体包文件的格式提供多个URL */
		/* 可以指定字体的样式属性，如font-weight和font-style */
		}
	.out-box {
		min-height: 100vh;
		width: 100vw;
		max-width: 750rpx;
		margin: 0 auto;
		overflow: hidden;
		font-family: 'MyFont', sans-serif;
		// background: linear-gradient(90deg, rgba(250, 244, 230, 1) 0%, rgba(242, 226, 196, 1) 100%);
		background: rgba(246, 247, 251, 1);
		width: 750rpx auto;
		.hader{
			width: 710rpx;
			height: 490rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			.hader_title{
				width: 680rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				margin: 0 auto;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 1);
				border-bottom: 1px solid rgba(240, 240, 240, 1);
				line-height: 50rpx;
				.hader_title_right_one{
					width: 200rpx;
					height: 50rpx;
					margin: 25rpx 10rpx;
				}
				.hader_title_right_two{
					width: 180rpx;
					height: 50rpx;
					color: rgba(137, 137, 137, 1);
					font-size: 22rpx;
					line-height: 50rpx;
					margin: 25rpx 10rpx;
					.icon{
						width: 14rpx;
						height: 24rpx;
						margin:0rpx  10rpx;
						line-height: 50rpx;
						position: relative;
						transform: translateY(2px); /* 根据需要调整移动的距离 */
					}
				}
			}
			.progress{
				width: 600rpx;
				height: 60rpx;
				display: inline-block;
				margin: 30rpx 60rpx 20rpx 60rpx;
			}
			.hader_main{
				width: 710rpx;
				height: 260rpx;
				display: flex;
				.item_left{
					width: 200rpx;
					height: 200rpx;
					// border: 1px solid black;
					margin: 10rpx 0 0 16rpx;
					// background-image: url(https://img.72qq.com/file/202007/24/aed12b08ae.jpg);
					// background-size: 100% 100%;
					position: relative;
					.menban{
						width: 196rpx;
						height: 196rpx;
						//background-size: cover;
						position: absolute;
						top: 8rpx;
						z-index: 100;
						background-color:rgba(0, 0, 0, 0.3);
						// margin-top: 8rpx;
						border-radius: 8rpx;
						line-height: 184rpx;
						text-align: center;
						color: #fff;
						font-weight: 600;
						font-size: 36rpx;
					}
					.item_left_img{
						width: 196rpx;
						height: 196rpx;
						// background-size: cover;
						margin-top: 8rpx;
						border-radius: 8rpx;
					}
				}
				.item_right{
					width: 480rpx;
					height: 260rpx;
					margin-left: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					.item_right_one{
						color: #333333;
						width: 480rpx;
						height: 40rpx;
						font-size: 26rpx;
						margin-top: 16rpx;
						font-weight: 500;
						line-height: 40rpx;
						overflow: hidden;
						// 超出出现省略号
						text-overflow: ellipsis;
						// 换行
						white-space: nowrap;
						.isspan{
							color:#FF334E ;
						}
					}
					.item_right_two_big{
						width: 480rpx;
						height: 40rpx;
						margin:8rpx 0 4rpx 0rpx;
						display: flex;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						.item_right_two{
							// font-family: PingFang SC-Regular, PingFang SC;
							color: #aeadad;
							line-height: 40rpx;
							font-size: 22rpx;

							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
						.three_are{
							height: 40rpx;
							margin:  0 0 0 30rpx;
							line-height: 40rpx;
							font-size: 26rpx;
							background: rgba(0,162,255,0.06);
							color: #00A2FF;
							font-weight: 500;
							border-radius: 10rpx;
						}
					}

					.item_right_identifying{
						width: 480rpx;
						height: 46rpx;
						margin: 6rpx 0 2rpx 0;
						display: flex;
						// margin-top: 2rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						// border: 1px solid black;
						.item_right_identifying_item{
							height: 32rpx;
							font-size: 22rpx;
							font-weight: 400;
							line-height: 30rpx;
							padding: 5rpx 14rpx;
							margin-right: 14rpx;
							text-align: center;
							// background-color: rgba(249,189,82,0.12);
							color:#005CF1;
							border: 1px solid #005CF1;
							border-radius: 60rpx;
							// &:nth-child(1) {
							// 	background-color: rgba(249,189,82,0.12);
							// 	color:#F9BD52;
							// }
							// &:nth-child(2) {
							// 	background-color: rgba(156,126,255,0.12) ;
							// 	color:#9C7EFF ;
							// }
							// &:nth-child(3) {
							// 	background-color: rgba(63,210,140,0.12);
							// 	color:#3FD28C;
							// }
							// &:nth-child(4) {
							// 	background-color:rgba(210,63,63,0.12);
							// 	color:#D23F3F;
							// }
							// &:nth-child(5) {
							// 	background-color:rgba(79,75,255,0.12);
							// 	color:#4F4BFF;
							// }
							// &:nth-child(6) {
							// 	background-color: rgba(255,0,214,0.12);
							// 	color:#FF00D6 ;
							// }
						}
					}
					.item_right_three{
						width: 278rpx;
						height: 46rpx;
						background: rgba(0,92,241,0.1);
						border-radius:24rpx;
						margin: 16rpx 0 0 0rpx;
						display: flex;
						.three_icon{
							width: 104rpx;
							height: 46rpx;
							background: #005CF1;
							border-radius:24rpx;
							display: flex;
							.icon{
								width: 30rpx;
								height: 30rpx;
								display: inline-block;
								margin: 8rpx;
							}
							.name{
								width: 40rpx;
								height: 46rpx;
								font-weight: 500;
								font-size: 20rpx;
								color: #FFFFFF;
								line-height: 46rpx;
								text-align: center;
							}
						}
						.three_time{
							width: 170rpx;
							height: 46rpx;
							line-height: 46rpx;
							font-weight: 500;
							font-size: 22rpx;
							color: #005CF1;
							text-align: center;
							// border: 1px solid black;
						}
					}
					.purpose{
						width: 460rpx;
						height: 30rpx;
						font-size: 22rpx;
						color: #000000;
						line-height: 26rpx;
						margin: 10rpx 0 0 0rpx;
					}
				}
			}
			.hader_maintwo{
				width: 680rpx;
				height: 260rpx;
				// border: 1px solid black;
				margin:0 auto;
				display: flex;
				.item_left{
					width: 680rpx;
					height: 260rpx;
					.item_left_one{
						width: 680rpx;
						line-height: 40rpx;
						margin: 16rpx 0 0 10rpx;
						line-height: 40rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: rgba(46, 46, 46, 1);
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						.isspan{
							color:#005CF1 ;
						}
					}
					.item_right_two_big{
						width: 680rpx;
						height: 40rpx;
						margin:6rpx 0 4rpx 16rpx;
						display: flex;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						.item_right_two{
							// font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #898989;
							line-height: 40rpx;
							font-size: 22rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
						.three_are{
							height: 40rpx;
							margin:  0 0 0 30rpx;
							font-size: 26rpx;
							background: rgba(0,162,255,0.06);
							color: #00A2FF;
							border-radius: 10rpx;
						}
					}
					.item_right_identifying{
						width: 660rpx;
						height: 46rpx;
						margin: 6rpx 0 2rpx 0;
						display: flex;
						// margin-top: 2rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						// border: 1px solid black;
						.item_right_identifying_item{
							height: 32rpx;
							font-size: 22rpx;
							font-weight: 400;
							line-height: 30rpx;
							padding: 5rpx 14rpx;
							margin-left: 14rpx;
							text-align: center;
							// background-color: rgba(249,189,82,0.12);
							color:#005CF1;
							border: 1px solid #005CF1;
							border-radius: 60rpx;
							// border: 1px solid rgba(255, 141, 26, 1);
							// &:nth-child(1) {
							// 	background-color: rgba(249,189,82,0.12);
							// 	color:#F9BD52;
							// }
							// &:nth-child(2) {
							// 	background-color: rgba(156,126,255,0.12) ;
							// 	color:#9C7EFF ;
							// }
							// &:nth-child(3) {
							// 	background-color: rgba(63,210,140,0.12);
							// 	color:#3FD28C;
							// }
							// &:nth-child(4) {
							// 	background-color:rgba(210,63,63,0.12);
							// 	color:#D23F3F;
							// }
							// &:nth-child(5) {
							// 	background-color:rgba(79,75,255,0.12);
							// 	color:#4F4BFF;
							// }
							// &:nth-child(6) {
							// 	background-color: rgba(255,0,214,0.12);
							// 	color:#FF00D6 ;
							// }
							// &:nth-child(7) {
							// 	background-color: rgba(249,189,82,0.12);
							// 	color:#F9BD52;
							// }
							// &:nth-child(8) {
							// 	background-color: rgba(156,126,255,0.12) ;
							// 	color:#9C7EFF ;
							// }
							// &:nth-child(9) {
							// 	background-color: rgba(63,210,140,0.12);
							// 	color:#3FD28C;
							// }
						}
					}
					.item_left_two{
						width: 680rpx;
						width: 670rpx;
						height: 44rpx;
						margin: 6rpx 0 0 10rpx;
						// background-color: pink;
						line-height: 44rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(0, 0, 0, 1);
					}
				}
			}
		}
		// 下方选择产品部分
		.main{
			width: 710rpx;
			height: 560rpx;
			margin: 0 auto;
			margin-top: 16rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			position: relative;
			.title{
				width: 650rpx;
				height: 100rpx;
				border-bottom: 1px solid rgba(240, 240, 240, 1);
				margin: 0 auto;
				font-size: 28rpx;
				color: #000000;
				line-height: 100rpx;
			}
			.main_top{
				width: 650rpx;
				height: 140rpx;
				margin: 0 auto;
				font-family: PingFang SC, PingFang SC;
				border-bottom: 1px solid rgba(240, 240, 240, 1);
				display: flex;
				.main_top_image{
					width: 92rpx;
					height: 92rpx;
					margin: 20rpx 30rpx 0 0;
				}
				.main_top_left{
					width: 420rpx;
					height: 140rpx;
					line-height: 50rpx;
					.main_top_left_one{
						height: 50rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						margin-top: 20rpx;
					}
					.main_top_left_two{
						height: 50rpx;
						font-size: 22rpx;
						color: #898989;
						line-height: 26rpx;
						margin-top: 10rpx;
					}
				}
				.main_top_right{
					width: 110rpx;
					height: 140rpx;
					font-weight: 600;
					font-size: 42rpx;
					color: #005CF1;
					line-height: 140rpx;
					text-align: center;
					// border: 1px solid black;
					.spanone{
						font-size: 30rpx;
					}
				}
			}
			.two_tw{
				width: 680rpx;
				height: 140rpx;
				margin:  10rpx 0 0 30rpx;
				.scroll-view_H{
					overflow: hidden;
				}
				.scroll-view_H ::-webkit-scrollbar {
					display: none; /* 隐藏滚动条 */
				}
				:deep(.uni-scroll-view-content){
					display: flex;
					.scroll_item{
						width: 176rpx;
						height: 110rpx;
						padding-top: 14rpx;
						margin-right: 16rpx;
						border-radius: 12rpx;
						font-family: PingFang SC, PingFang SC;
						background: rgba(166, 166, 166, 0.10);
						border: 1px solid rgba(166, 166, 166, 0.10);
						position: relative;
						.item_top{
							width: 174rpx;
							height: 38rpx;
							font-size: 20rpx;
							color: #000000;
							line-height: 28rpx;
							text-align: center;
						}
						.item_center{
							width: 174rpx;
							height: 58rpx;
							font-weight: 600;
							font-size: 42rpx;
							color: #005CF1;
							line-height: 58rpx;
							text-align: center;
							.span2{
								font-size: 33rpx;
							}
						}
						.item_bottom{
							width: 48rpx;
							height: 48rpx;
							z-index: 99;
							position: absolute;
							top: 77rpx;
							left: 129rpx;
							background: url(../../static/images/lanjiaobiao.png) no-repeat;
							background-size: 100% 100%;
						}
					}
					.active11{
						border: 1px solid rgba(0, 92, 241, 1);
						background-color: rgba(0, 92, 241, 0.10);
					}
				}
				.active{
					background: rgb(252, 227, 221);
					border: 1px solid rgba(255, 87, 51, 1);
					.select_center_item_top{
						background: rgba(255, 87, 51, 1);
						color: rgba(255, 255, 255, 1);
					}
				}
			
		}

		}
		.pay_radio{
			width: 710rpx;
			height: 400rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			margin: 0 auto;
			margin-top: 16rpx;
			margin-bottom: 150rpx;
			.pay_top{
				width: 650rpx;
				height: 100rpx;
				margin: 0 auto;
				margin-bottom: 10rpx;
				border-bottom: 1px solid rgba(240, 240, 240, 1);
				font-size: 28rpx;
				color: #000000;
				line-height: 100rpx;
			}
			.radio_main{
				width: 660rpx;
				margin: 0 auto;
				margin-top: 30rpx;
				.pay_item{
					width: 650rpx;	
					height: 108rpx;
					margin-bottom:20rpx;
					background: rgba(166,166,166,0.1);
					border: 1rpx solid rgba(166,166,166,0.1);
					border-radius: 12rpx;
					display: flex;
					.img{
						width: 48rpx;
						height: 48rpx;
						margin: 30rpx 20rpx;
					}
					.text{
						width: 420rpx;
						height: 108rpx;
						font-size: 28rpx;
						font-weight: 500;
						margin-left: 10rpx;
						line-height: 108rpx;
						color: rgba(0, 0, 0, 1);
						// border: 1px solid black;
					}
					.img2{
						width: 30rpx;
						height: 20rpx;
						margin: 45rpx;
					}
				}
				.defaul{
					background: rgba(0,92,241,0.1);
					border: 1rpx solid #005CF1;
				}

			}
		}
		

		// 最下方的悬浮
		.buttom{
			width:750rpx;
			height: 130rpx;
			margin: 0 auto;
			background-color: #fff;
			display: flex;
			position: fixed;
			bottom: 0;
			.buttom_Package{
				width: 360rpx;
				height: 140rpx;
				margin-left: 20rpx;
				.buttom_name{
					width: 360rpx;
					height: 60rpx;
					font-size: 26rpx;
					color: #898989;
					line-height: 65rpx;
					// border: 1px solid black;
				}
				.buttom_money{
					width: 360rpx;
					height: 70rpx;
					background-color: #fff;
					font-size: 42rpx;
					font-weight: 600;
					line-height: 60rpx;
					color: rgba(0, 92, 241, 1);
					.span1{
						font-size: 28rpx;
						color: #000000;
						line-height: 33rpx;
					}
					.span2{
						font-size: 28rpx;
					}
				}
			}

			.buttom_buttom{
				width: 360rpx;
				height: 100rpx;
				background: linear-gradient( 90deg, #5395FF 0%, #005CF1 100%);
				border-radius: 16rpx;
				font-family: PingFang SC, PingFang SC;
				font-size: 34rpx;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;
				margin: 10rpx 0 0 0rpx;
			}
		}

	}
</style>
